<template>
	<view class="detail_home">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in pics" @click="previewImg(index)">
				<view class="swiper-item">
					<image :src="item.pics_mid_url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="price"><text>￥6809</text></view>
		<view class="goods_name">
			<text>
				创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视Skyworth) G7
				4K超高清彩电HDR 智能网络液晶平板电视板电视(玫瑰金) 65G7 (65英寸)
			</text>
		</view>
		<view class="content">
			图文详情
		</view>
		<view class="introduce">
			<rich-text :nodes="introduce"></rich-text>
		</view>
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: "",
				pics: [],
				introduce: "",
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺'
				}, {
					icon: 'cart',
					text: '购物车'
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		onLoad(option) {
			console.log(option)
			this.goodsId = option.goodsId
			this.getGoodsDetail(option.goodsId);
		},
		methods: {
			async getGoodsDetail(goodsId) {
				const res = await this.$myRequest({
					url: '/goods/detail?goods_id=' + goodsId
				})
				console.log(res.data.message)
				let detail = res.data.message
				this.pics = detail.pics
				this.introduce = detail.goods_introduce
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				if (e.index === 0) {
					uni.showToast({
						title: '加入购物车'
					})
				} else {
					uni.showToast({
						title: '立即购买'
					})
				}
			},
			previewImg(index) {
				console.log(index)
				console.log(this.pics)
				let bigPic = this.pics.map(v => v.pics_big)
				uni.previewImage({
					urls: bigPic,
					indicator: 'number',
					loop: true,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail_home {
		swiper {
			height: 500rpx;
			text-align: center;

			.swiper-item {
				image {
					width: 70%;
				}
			}
		}

		.price {
			height: 80rpx;

			text {
				margin-left: 20rpx;
				color: $shop-color;
				font-size: 33rpx;
				font-weight: bold;
				line-height: 80rpx;
			}
		}

		.goods_name {
			text {
				margin: 20rpx;
				font-size: 28rpx;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			border-top: 5rpx solid $shop-color-bg;
			border-bottom: 5rpx solid $shop-color-bg;
		}

		.content {
			color: $shop-color;
			font-weight: bold;
			font-size: 33rpx;
			line-height: 80rpx;
			margin-left: 20rpx;
		}

		.introduce {
			padding-bottom: 50rpx;
		}

		.goods_nav {
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
</style>
